<template>
	<view class="homeLayout pageBg">
		<custom-nav-bar title="做题家"></custom-nav-bar>
		<view class="banner">
			<swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"
			indicator-active-color="#fff" autoplay circular>
				<swiper-item v-for="item in bannerList" :key="item._id">
					<navigator v-if="item.target == 'miniProgram'" target="miniProgram" :url="item.url" class="like" :app-id="item.appid">
						<image :src="item.picurl" mode="aspectFill"></image>
					</navigator>
					<navigator v-else :url="`/pages/classlist/classlist?${item.url}`" class="like">
						<image :src="item.picurl" mode="aspectFill"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical autoplay circular interval="1500" duration="300">
					<!--  #ifndef  APP -->
					<swiper-item v-for="item in noticeList" :key="item._id">
						<navigator :url="'/pages/notice/detail?id=' + item._id">
							{{item.title}}
						</navigator>
					</swiper-item>
					<!--  #endif -->
					
					<!--  #ifdef  APP -->
					<swiper-item v-for="item in newslist">
						{{item.val}}
					</swiper-item>
					<!--  #endif -->

				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>
		<view class="select">
			<common-title>
				<template #name>热门题库</template>
				<template #custom>
					<view class="date">
						<uni-icons type="calendar" size="18"></uni-icons>
						<view class="text">
							<uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>							
						</view>
					</view>
				</template>
			</common-title>
			<view class="content">
				<scroll-view scroll-x>
					<view class="box" v-for="item in randomList" :key="item._id" @click="goPreview(item._id)">
						<image :src="item.smallPicurl" mode="aspectFill"></image>
						<view class="mask">{{item.tabs[0]}}</view>
						<view class="tab">高级</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="theme">
			<common-title>
				<template #name>精选题库</template>
				<template #custom>
					<navigator url="" class="more">More+</navigator>
				</template>
			</common-title>
			<view class="content">
				<theme-item v-for="item in classifyList" :key="item._id" :itemObj="item"></theme-item>
				<theme-item :isMore="true"></theme-item>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue';
// #ifdef APP
// 使用内置SQLite数据库操作工具类
import dbUtils from '@/uni_modules/zjy-sqlite-manage/components/zjy-sqlite-manage/dbUtils.js';
let newslist = ref([])
dbUtils.openDb("demo")

//dbUtils.init("demo",[{tableName:'news',sql:"CREATE TABLE IF NOT EXISTS news (id INTEGER PRIMARY KEY AUTOINCREMENT,val TEXT NOT NULL);"}])

dbUtils.getTable("demo")
	
// for (let i=0;i<20;i++) {
// 	dbUtils.addTabItem("demo","news",{
// 		id:i+1,
// 		val:"zhansan"+i
// 	})
// }

// dbUtils.getCount("demo","users").then(e=>{
// 	console.info("zhongshu：",e[0].num)
// })

dbUtils.getTableDate("demo","news").then(data=>{
	console.log(data)
	newslist.value = data
})
// #endif

//跳转到预览页面
const goPreview = (id)=>{
	uni.setStorageSync("storageClassList",randomList.value)
	uni.navigateTo({
		url:"/pages/preview/preview?id="+id
	});
}

import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	
import { dataGetBanner,dataGetNotice,dataGetDayRandom,dataGetClassify} from '@/data/staticdata.js'
//接口数据

const bannerList = ref([])

const getBanner = async ()=>{
	bannerList.value = await dataGetBanner();
}

//每日推荐

const randomList = ref([])

const getDayRandom = async()=>{
	randomList.value = await dataGetDayRandom()
}

//壁纸公告

const noticeList = ref([])

const getNotice = async()=>{
	noticeList.value = await dataGetNotice({select:true})
}

//专题精选

const classifyList = ref([])

const getClassify = async()=>{
	classifyList.value = await dataGetClassify({select:true})
}

//分享给好友
onShareAppMessage(e=>{
	return {
		title:"咸虾米壁纸,好看的手机壁纸",
		path:"pages/classify/classify"
	}
})

//分享到朋友圈
onShareTimeline(e=>{
	return {
		title:"咸虾米壁纸,好看的手机壁纸",
		imageUrl:"https://api.qingnian8.com/images/logo-banner.png"
	}
})

getBanner();
getDayRandom();
getNotice();
getClassify();

</script>

<style lang="scss" scoped>
.homeLayout {
	.banner{
		width: 750rpx;
		padding: 30rpx 0;
		swiper{
			width: 750rpx;
			height: 340rpx;
			&-item{
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				.like{
					width: 100%;
					height: 100%;
					image{
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
	.notice{
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f9f9f9;
		margin: 0 auto;
		border-radius: 80rpx;
		display: flex;
		.left{
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			:deep(){
				.uni-icons{
					color: $brand-theme-color !important;
				}
			}
			.text{
				color: $brand-theme-color;
				font-weight: 600;
				font-size: 28rpx;
			}
		}
		.center{
			flex: 1;
			swiper{
				height: 100%;
				&-item{
					height: 100%;
					font-size: 30rpx;
					color: #666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
		.right{
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.select{
		padding-top: 50rpx;
		.date{
			color: $brand-theme-color;
			display: flex;
			align-items: center;
			:deep(){
				.uni-icons{
					color: $brand-theme-color !important;
				}
			}
			.text{
				margin-left: 5rpx;
			}
		}
		.content{
			width: 720rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
			scroll-view{
				white-space: nowrap;
				.box{
					width: 200rpx;
					height: 430rpx;
					display: inline-block;
					margin-right: 15rpx;
					overflow: hidden;
					position: relative;
					image{
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
					.mask{
						width: 100%;
						height: 70rpx;
						position: absolute;
						bottom: 0;
						left: 0;
						background: rgba(0, 0, 0, 0.2);
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						backdrop-filter: blur(20rpx);
						font-weight: 600;
						font-size: 30rpx;
					}
					.tab{
						position: absolute;
						top: 0;
						left: 0;
						background: rgba(250, 129, 90, 0.7);
						backdrop-filter: blur(20rpx);
						color: #fff;
						font-size: 35rpx;
						padding: 6rpx 14rpx;
						border-radius: 0 0 20rpx 0;
						transform: scale(0.8);//缩放
						transform-origin: lef top;
					}
				}
				.box:last-child{margin-right: 30rpx;}
			}
		}
	}
	.theme{
		padding: 50rpx 0;
		.more{
			font-size: 32rpx;
			color: #888;
		}
		.content{
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: grid;
			gap: 15rpx;
			grid-template-columns: repeat(3,1fr);
		}
	}
}
</style>
